<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>视频预览工具</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        :root {
            --bg: #181818;
            --bg-card: #232323;
            --text: #f1f1f1;
            --text-secondary: #b0b0b0;
            --border: #232323;
            --btn-bg: #232323;
            --btn-hover: #333;
            --btn-active: #e53935;
            --tab-bg: transparent;
            --tab-active-bg: #e53935;
            --tab-text: #b0b0b0;
            --tab-active-text: #fff;
            --tab-border: #e53935;
            --sort-btn-bg: #232323;
            --sort-btn-text: #f1f1f1;
            --sort-btn-active-bg: #e53935;
            --sort-btn-active-text: #fff;
            --sort-dropdown-bg: #232323;
            --sort-dropdown-text: #f1f1f1;
            --transition-speed: 0.3s;
        }
        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
            min-height: 100vh;
        }
        .container-fluid {
            width: 100%;
            max-width: 1800px;
            margin: 0 auto;
            padding: 2rem;
            transition: padding var(--transition-speed);
        }
        .navbar {
            background: rgba(0, 0, 0, 0.8) !important;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .navbar-brand {
            font-weight: 700;
            letter-spacing: 1px;
            background: linear-gradient(45deg, #ff4d4d, #f9cb28);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .offcanvas {
            background: rgba(35, 35, 35, 0.95);
            backdrop-filter: blur(10px);
        }
        .offcanvas-header {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .preview-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 2rem;
            padding: 0.5rem;
            transition: gap var(--transition-speed);
            position: relative;
            z-index: 1;
        }
        .preview-item {
            background: var(--bg-card);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0,0,0,0.18);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        .preview-item:hover {
            transform: none;
            box-shadow: 0 4px 16px rgba(0,0,0,0.18);
        }
        .preview-container {
            width: 100%;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #181818;
            overflow: hidden;
            position: relative;
        }
        .preview-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transition-speed);
        }
        .preview-item:hover .preview-image {
            transform: scale(1.05);
        }
        .preview-info {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            background: linear-gradient(to bottom, var(--bg-card), rgba(35, 35, 35, 0.95));
        }
        .preview-title {
            font-size: 1.1rem;
            color: #fff;
            font-weight: 600;
            margin: 0;
            line-height: 1.4;
            height: 2.8em;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
        }
        .preview-time {
            font-size: 0.95rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .preview-time i {
            width: 16px;
            text-align: center;
        }
        .button-group {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: rgba(0, 0, 0, 0.2);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        .card-action-btn {
            width: 36px;
            height: 36px;
            padding: 0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            transition: all var(--transition-speed);
            color: var(--text-secondary);
        }
        .card-action-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.1);
        }
        .favorite-button {
            color: #ffb300;
        }
        .favorite-button.favorited {
            background: rgba(255, 179, 0, 0.2);
            color: #ffd54f;
        }
        .delete-button {
            color: #e53935;
        }
        .delete-button:hover {
            background: rgba(229, 57, 53, 0.2);
            color: #ff5252;
        }
        .tab-container {
            margin-bottom: 2rem;
            border-bottom: 2px solid var(--border);
            position: sticky;
            top: 0;
            background: var(--bg);
            z-index: 100;
            padding: 1rem 0;
        }
        .tab-buttons {
            display: flex;
            gap: 1rem;
            margin-bottom: -2px;
        }
        .tab-button {
            background: var(--tab-bg);
            color: var(--tab-text);
            border: none;
            font-size: 1.1rem;
            font-weight: 500;
            padding: 0.8rem 1.5rem;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all var(--transition-speed);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            border-radius: 8px 8px 0 0;
        }
        .tab-button .count {
            background: rgba(255, 255, 255, 0.1);
            padding: 0.2rem 0.6rem;
            border-radius: 12px;
            font-size: 0.9rem;
            transition: all var(--transition-speed);
        }
        .tab-button:hover {
            color: var(--tab-active-bg);
            background: rgba(229, 57, 53, 0.1);
        }
        .tab-button.active {
            background: var(--tab-active-bg);
            color: var(--tab-active-text);
            border-bottom: 2px solid var(--tab-border);
        }
        .tab-button.active .count {
            background: rgba(255, 255, 255, 0.2);
        }
        .sort-container {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            backdrop-filter: blur(10px);
            position: relative;
            z-index: 1001;
        }
        .btn-group {
            position: relative;
            z-index: 1002;
        }
        .btn-group .dropdown-toggle {
            min-width: 160px;
            text-align: left;
            padding-right: 2rem;
        }
        .btn-group .dropdown-toggle::after {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
        }
        .btn-group .btn {
            background: var(--btn-bg);
            color: var(--text);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all var(--transition-speed);
        }
        .btn-group .btn:hover {
            background: var(--btn-hover);
            border-color: rgba(255, 255, 255, 0.2);
        }
        .btn-group .btn.active {
            background: var(--btn-active);
            color: #fff;
            border-color: var(--btn-active);
        }
        .dropdown-menu {
            background: var(--sort-dropdown-bg);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            min-width: 200px;
            z-index: 1003;
        }
        .dropdown-item {
            color: var(--sort-dropdown-text);
            transition: all var(--transition-speed);
            padding: 0.8rem 1.2rem;
            white-space: nowrap;
        }
        .dropdown-item:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }
        .dropdown-item.active {
            background: var(--btn-active);
            color: #fff;
        }
        .pagination {
            margin-top: 3rem;
            justify-content: center;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            list-style: none;
            padding: 0;
        }
        .page-link {
            color: var(--text);
            background: var(--btn-bg);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 0.7rem 1.3rem;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 500;
            transition: all var(--transition-speed);
        }
        .page-link:hover {
            background: var(--btn-hover);
            border-color: rgba(255, 255, 255, 0.2);
            color: #fff;
            transform: translateY(-2px);
        }
        .page-item.active .page-link {
            background: var(--btn-active);
            color: #fff;
            border-color: var(--btn-active);
        }
        .empty-state {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--text-secondary);
            font-size: 1.2rem;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            margin: 2rem 0;
        }
        .empty-state i {
            font-size: 4rem;
            margin-bottom: 1rem;
            color: var(--text-secondary);
            opacity: 0.5;
        }
        .scan-status {
            position: fixed;
            top: 1rem;
            right: 1rem;
            padding: 1rem 1.5rem;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            color: #fff;
            z-index: 1000;
            display: none;
            animation: slideIn 0.3s ease;
        }
        .scan-status.processing {
            border-left: 4px solid #2196f3;
        }
        .scan-status.success {
            border-left: 4px solid #4caf50;
        }
        .scan-status.error {
            border-left: 4px solid #f44336;
        }
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        @media (max-width: 768px) {
            .container-fluid {
                padding: 1rem;
            }
            .preview-grid {
                gap: 1rem;
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            }
            .preview-info {
                padding: 0.8rem;
            }
            .preview-title {
                font-size: 1rem;
            }
            .tab-button {
                font-size: 1rem;
                padding: 0.6rem 1rem;
            }
            .sort-container {
                flex-direction: column;
                align-items: stretch;
            }
            .btn-group {
                width: 100%;
            }
            .btn-group .btn {
                flex: 1;
            }
        }
        @media (max-width: 480px) {
            .container-fluid {
                padding: 0.5rem;
            }
            .preview-grid {
                grid-template-columns: 1fr;
            }
            .preview-container {
                height: 180px;
            }
            .preview-title {
                font-size: 0.95rem;
            }
            .tab-button {
                font-size: 0.9rem;
                padding: 0.5rem 0.8rem;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-dark px-3 py-2 d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center">
            <button class="btn btn-link text-light p-0 me-2" style="font-size:1.6rem;" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainMenu" aria-controls="mainMenu">
                <i class="fas fa-bars"></i>
            </button>
            <span class="navbar-brand mb-0 h1">视频预览</span>
        </div>
        <div class="d-flex align-items-center position-relative">
            <div id="scanStatusBar" class="scan-status"></div>
            <a href="https://github.com/mengfanding/video-preview-manager" target="_blank" class="btn btn-link text-light p-0" style="font-size:1.3rem;">
                <i class="fab fa-github"></i>
            </a>
        </div>
    </nav>

    <!-- Offcanvas 菜单 -->
    <div class="offcanvas offcanvas-start" tabindex="-1" id="mainMenu" aria-labelledby="mainMenuLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="mainMenuLabel">功能菜单</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <button id="scanButton" class="btn btn-success w-100 mb-3" onclick="startScan()">
                <i class="fas fa-plus-circle me-2"></i>
                扫描新视频
            </button>
            <a href="https://github.com/mengfanding/video-preview-manager" target="_blank" class="btn btn-outline-light w-100">
                <i class="fab fa-github me-2"></i>
                GitHub 项目
            </a>
        </div>
    </div>

    <div class="container-fluid">
        <!-- 标签页 -->
        <div class="tab-container">
            <div class="tab-buttons">
                <button class="tab-button {% if current_tab == 'all' %}active{% endif %}" onclick="switchTab('all')">
                    <i class="fas fa-film me-1"></i>
                    全部视频
                    <span class="count">{{ total_files }}</span>
                </button>
                <button class="tab-button {% if current_tab == 'favorites' %}active{% endif %}" onclick="switchTab('favorites')">
                    <i class="fas fa-star me-1"></i>
                    收藏视频
                    <span class="count">{{ favorite_files }}</span>
                </button>
            </div>
        </div>

        <!-- 排序控制 -->
        <div class="sort-container">
            <div class="btn-group">
                <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-sort me-1"></i>
                    排序方式：{{ 'ID' if sort_by=='id' else '时长' if sort_by=='duration' else '文件名' }}
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item {% if sort_by=='id' %}active{% endif %}" href="{{ url_for('index', page=current_page, per_page=per_page, tab=current_tab, sort_by='id', sort_order=sort_order) }}">
                        <i class="fas fa-hashtag me-2"></i>ID
                    </a></li>
                    <li><a class="dropdown-item {% if sort_by=='duration' %}active{% endif %}" href="{{ url_for('index', page=current_page, per_page=per_page, tab=current_tab, sort_by='duration', sort_order=sort_order) }}">
                        <i class="fas fa-clock me-2"></i>时长
                    </a></li>
                    <li><a class="dropdown-item {% if sort_by=='path' %}active{% endif %}" href="{{ url_for('index', page=current_page, per_page=per_page, tab=current_tab, sort_by='path', sort_order=sort_order) }}">
                        <i class="fas fa-file me-2"></i>文件名
                    </a></li>
                </ul>
            </div>
            <div class="btn-group">
                <a href="{{ url_for('index', page=current_page, per_page=per_page, tab=current_tab, sort_by=sort_by, sort_order='asc') }}"
                   class="btn {% if sort_order == 'asc' %}active{% endif %}">
                    <i class="fas fa-sort-up me-1"></i>
                    升序
                </a>
                <a href="{{ url_for('index', page=current_page, per_page=per_page, tab=current_tab, sort_by=sort_by, sort_order='desc') }}"
                   class="btn {% if sort_order == 'desc' %}active{% endif %}">
                    <i class="fas fa-sort-down me-1"></i>
                    降序
                </a>
            </div>
        </div>

        <!-- 视频网格 -->
        <div class="preview-grid">
            {% for record in records %}
            <div class="preview-item" onclick="window.location.href='/play/{{ record.id }}?page={{ current_page }}&per_page={{ per_page }}&tab={{ current_tab }}'">
                <div class="preview-container">
                    <img src="/preview/{{ record.preview[0]|basename }}" class="preview-image" alt="预览图">
                </div>
                <div class="preview-info">
                    <div class="preview-title">{{ record.original|basename }}</div>
                    <div class="preview-time">
                        <i class="fas fa-clock"></i>
                        {% if record.duration %}
                            {% set hours = (record.duration // 3600)|int %}
                            {% set minutes = ((record.duration % 3600) // 60)|int %}
                            {% set seconds = (record.duration % 60)|int %}
                            {{ '%02d:%02d:%02d'|format(hours, minutes, seconds) }}
                        {% else %}
                            {{ record.time }}
                        {% endif %}
                    </div>
                </div>
                <div class="button-group">
                    <button class="favorite-button card-action-btn {% if record.is_favorite %}favorited{% endif %}"
                            onclick="toggleFavorite({{ record.id }}, event)">
                        <i class="fas fa-star"></i>
                    </button>
                    <button class="delete-button card-action-btn" onclick="deleteVideo({{ record.id }}, event)">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
            {% else %}
            <div class="empty-state">
                <i class="fas {% if current_tab == 'favorites' %}fa-star{% else %}fa-film{% endif %}"></i>
                <p>{% if current_tab == 'favorites' %}暂无收藏视频{% else %}暂无预览记录{% endif %}</p>
            </div>
            {% endfor %}
        </div>

        <!-- 分页 -->
        {% if total_pages > 1 %}
        <nav aria-label="Page navigation">
            <ul class="pagination">
                {% if current_page > 1 %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('index', page=1, per_page=per_page, tab=current_tab, sort_by=sort_by, sort_order=sort_order) }}">
                        <i class="fas fa-angle-double-left"></i>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('index', page=current_page-1, per_page=per_page, tab=current_tab, sort_by=sort_by, sort_order=sort_order) }}">
                        <i class="fas fa-angle-left"></i>
                    </a>
                </li>
                {% endif %}

                {% set start_page = current_page - 2 if current_page - 2 > 0 else 1 %}
                {% set end_page = current_page + 2 if current_page + 2 <= total_pages else total_pages %}
                {% for page in range(start_page, end_page + 1) %}
                <li class="page-item {% if page == current_page %}active{% endif %}">
                    <a class="page-link" href="{{ url_for('index', page=page, per_page=per_page, tab=current_tab, sort_by=sort_by, sort_order=sort_order) }}">{{ page }}</a>
                </li>
                {% endfor %}

                {% if current_page < total_pages %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('index', page=current_page+1, per_page=per_page, tab=current_tab, sort_by=sort_by, sort_order=sort_order) }}">
                        <i class="fas fa-angle-right"></i>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('index', page=total_pages, per_page=per_page, tab=current_tab, sort_by=sort_by, sort_order=sort_order) }}">
                        <i class="fas fa-angle-double-right"></i>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
    <script>
        // 标签页切换
        function switchTab(tabName) {
            const urlParams = new URLSearchParams(window.location.search);
            const currentPage = urlParams.get('page') || 1;
            const perPage = urlParams.get('per_page') || {{ per_page }};
            const sortBy = urlParams.get('sort_by') || 'id';
            const sortOrder = urlParams.get('sort_order') || 'asc';
            
            window.location.href = `?tab=${tabName}&page=${currentPage}&per_page=${perPage}&sort_by=${sortBy}&sort_order=${sortOrder}`;
        }

        // 扫描状态管理
        let scanPollingTimer = null;

        function updateScanButton(running) {
            const scanBtn = document.getElementById('scanButton');
            const scanStatusBar = document.getElementById('scanStatusBar');
            let stopBtn = document.getElementById('stopScanButton');
            
            if (running) {
                scanBtn.disabled = true;
                scanBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> 正在扫描...';
                
                if (!stopBtn) {
                    stopBtn = document.createElement('button');
                    stopBtn.id = 'stopScanButton';
                    stopBtn.className = 'btn btn-danger w-100 mt-2';
                    stopBtn.innerHTML = '<i class="fas fa-stop-circle me-2"></i>终止扫描';
                    stopBtn.onclick = stopScan;
                    scanBtn.parentNode.insertBefore(stopBtn, scanBtn.nextSibling);
                }
                
                if (scanStatusBar) {
                    scanStatusBar.className = 'scan-status processing';
                    scanStatusBar.style.display = 'block';
                    scanStatusBar.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>正在扫描视频...';
                }
            } else {
                scanBtn.disabled = false;
                scanBtn.innerHTML = '<i class="fas fa-plus-circle me-2"></i>扫描新视频';
                
                if (stopBtn) stopBtn.remove();
                if (scanStatusBar) {
                    scanStatusBar.style.display = 'none';
                }
            }
        }

        function pollScanStatus() {
            fetch('/scan_status')
                .then(r => r.json())
                .then(data => {
                    updateScanButton(data.running);
                    if (data.running) {
                        scanPollingTimer = setTimeout(pollScanStatus, 1000);
                    } else {
                        scanPollingTimer = null;
                    }
                });
        }

        function startScan() {
            const scanBtn = document.getElementById('scanButton');
            scanBtn.disabled = true;
            scanBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> 正在扫描...';
            
            fetch('/scan', { method: 'POST' })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        updateScanButton(true);
                        pollScanStatus();
                    } else {
                        updateScanButton(false);
                        showStatus('error', data.message);
                    }
                })
                .catch(error => {
                    updateScanButton(false);
                    showStatus('error', '扫描请求失败：' + error);
                });
        }

        function stopScan() {
            fetch('/stop_scan', { method: 'POST' })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        if (scanPollingTimer) clearTimeout(scanPollingTimer);
                        pollScanStatus();
                    } else {
                        showStatus('error', data.message);
                    }
                })
                .catch(error => {
                    showStatus('error', '终止请求失败：' + error);
                });
        }

        // 状态提示
        function showStatus(type, message) {
            const statusBar = document.getElementById('scanStatusBar');
            statusBar.className = `scan-status ${type}`;
            statusBar.style.display = 'block';
            statusBar.innerHTML = `<i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'} me-2"></i>${message}`;
            
            setTimeout(() => {
                statusBar.style.display = 'none';
            }, 3000);
        }

        // 删除视频
        function deleteVideo(recordId, event) {
            event.stopPropagation();
            
            if (!confirm('确定要删除这个视频吗？此操作不可恢复。')) {
                return;
            }
            
            fetch(`/delete/${recordId}`, {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showStatus('success', '视频已成功删除');
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    showStatus('error', '删除失败：' + data.message);
                }
            })
            .catch(error => {
                showStatus('error', '删除失败：' + error);
            });
        }

        // 收藏功能
        function toggleFavorite(recordId, event) {
            event.stopPropagation();
            
            fetch(`/favorite/${recordId}`, {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showStatus('success', data.is_favorite ? '视频已成功收藏！' : '已取消收藏！');
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    showStatus('error', '操作失败：' + data.message);
                }
            })
            .catch(error => {
                showStatus('error', '操作失败：' + error);
            });
        }

        // 页面加载时检查扫描状态
        window.addEventListener('DOMContentLoaded', function() {
            pollScanStatus();
        });
    </script>
</body>
</html>
    